<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/TakeawaySystem/css/login.css">
    <title>登录系统</title>
</head>
<body>

<div>
    <form action="/TakeawaySystem/user/login" method="post" id="reg-from">
        <table id="table_container">
            <th id="th_size" colspan="3">欢 迎 登 录</th>
            <tr><td colspan="2">
                <li><label>登录身份</label>
                    <select name="id" >

                        <option value=0 <c:if test="${id==0}"></c:if>>用户</option>
                        <option value=1 <c:if test="${id==1}"></c:if>>商家</option>
                        <option value=2 <c:if test="${id==1}"></c:if>>管理员</option>
                    </select>

                </li>
            </td></tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username" id="username">
                    <br>
                    <span id="username_err" class="err_meg" style="display: none">用户名不能为空</span>
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"  >
                    <br>
                    <span id="pwd_err" class="err_meg" style="display: none">密码不能为空</span></td>

            </tr>


            <tr>
                <td colspan="2"> <input type="submit" value="登录" class ="button"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="reset" value="重置" class="button"></td>
            </tr>
            <tr>
                <td colspan="2"><a href="/TakeawaySystem/jsp/MailLogin.jsp">邮箱登录</a> </td>

            </tr>
            <tr>
                <td colspan="2"><a href="/TakeawaySystem/jsp/register.jsp">没有账号？注册一下</a> </td>

            </tr>
            <tr>
                <td colspan="2"><a href="/TakeawaySystem/jsp/UserCenter.jsp">游客浏览</a> </td>

            </tr>
        </table>
    </form>

    <script>
        let username = document.getElementById("username");
        let err = document.getElementById("username_err");
        username.onblur = checkUsername;
        function checkUsername() {
            var un = username.value ;
            var reg = /^\d{0}$/;
            var flag = reg.test(un)
            if (flag){
                err.style.display = "";
            }
            else {
                err.style.display = "none";
            }
            return !flag;
        }

        var password = document.getElementById("password");
        var err2 = document.getElementById("pwd_err");
        password.onblur = checkPwd;
        function checkPwd() {
            var pwd = password.value ;
            var reg = /^\d{0}$/;
            var flag = reg.test(pwd);
            if (flag){
                err2.style.display = "";
            }
            else {
                err2.style.display = "none";
            }
            return !flag;
        }
        var reg_from = document.getElementById("reg-from");
        reg_from.onsubmit = checkSubmit;
        function checkSubmit() {
            var flag = checkUsername() && checkPwd();
            return flag;
        }

    </script>
</div>
</body>
</html>
